<template>
  <main>

    <c-header :menus="[]" :btns="btns" @btnAct="btnAct" />

    <am-container><article class="dg-art">
      <am-row>

        <!-- 头像、名称、标签 -->
        <am-col :span="12">
          <am-row>
            <div class="am-u-sm-4 am-u-md-2">
              <am-image custom-class="am-center am-margin-bottom-sm"
                v-lazy="static_pic + designer.headImagePath"
                :src="''"
                :responsive="true"
                :round="true" alt="" />
            </div>
            <div class="am-u-sm-8 am-u-md-10">
              <div class="am-margin-bottom am-sm-only-text-center">
                <h1>{{ works.name }} BY {{ designer.name }}</h1>
                <p>
                  <span v-for="(sub, index) in worksTag" :key="index">
                    {{ sub.name }} / 
                  </span>
                </p>
              </div>
            </div>
          </am-row>
        </am-col>

        <!-- 轮播图 -->
        <am-col :span="12">
          <v-touch tag="div" @swipeleft="nextImg" @swiperight="preImg">
            <!-- slide-down -->
            <a :href="static_pic + curCarPath" target="_blank">
              <am-image custom-class="am-margin-bottom-sm" v-if="carImgShow"
                v-lazy="static_pic + curCarPath"
                :src="''"
                :responsive="true" />
            </a>
          </v-touch>
          <carousel :isNeedCar="true" :isThumbnail="true" :carImgs="carImgs" :carImgIndex.sync="carImgIndex" />
        </am-col>

        <!-- 操作 -->
        <am-col :span="12" v-if="works.status === '2'">
          <div class="am-fr">
            <am-button-group custom-class="am-margin">
              <am-button @click="vote" :disabled="voteAbled">投一票（{{ works.poll }}）</am-button>
              <am-button @click="share.weibo()">微博分享</am-button>
              <am-button @click="share.weixin()">微信分享</am-button>
              <am-button>[可补充]</am-button>
            </am-button-group>
          </div>
        </am-col>

        <!-- 详细信息 -->
        <am-col :span="12">
          <am-row>

            <div class="am-u-sm-12 am-u-md-8">
              <p>
                作品介绍：{{ works.introduction }}
              </p>
              <!-- <p>
                业主信息：{{ works.ownerName }}，{{ works.ownerAddress }}，{{ works.ownerTel }}
              </p>
              <p>
                设计师联系电话：{{ designer.tel }}
              </p> -->
            </div>

            <div class="am-u-sm-12 am-u-md-4">
              <!-- 二维码 -->
              <div class="am-fr">
                作品全景图
                <a :href="qartConfig.value" target="_blank">
                  <!-- <vue-q-art :config="qartConfig"></vue-q-art> -->
                  <qr-code :text="qartConfig.value"></qr-code>
                </a>
              </div>
            </div>
          </am-row>
        </am-col>

        <!-- 门店信息 -->
        <am-col :span="12">
          <am-row>
            <am-col :span="12">
              <h2>门店信息</h2>
            </am-col>

            <div class="am-u-sm-6 am-u-md-3">
              <am-image :responsive="true" v-lazy="thumbnail + store.storeMainPic" :src="''" />
              <p>门头照</p>
            </div>

            <div class="am-u-sm-6 am-u-md-3" v-if="storePic" v-for="(item, index) in storePic" :key="index">
              <am-image :responsive="true" v-lazy="thumbnail + item" src="''" />
              <p>店面图{{ index + 1 }}</p>
            </div>

            <div class="am-u-sm-12">
              <h3>地址：{{ store.address }}</h3>
              <bd-map
                :pageCapacity="1"
                :center="store.province"
                :location="store.city"
                :keyword="store.address" />
            </div>
          </am-row>
        </am-col>


        <!-- 设计师其他作品 -->
        <am-col :span="12">
          <am-row>
            <am-col :span="12">
              <hr data-am-widget="divider" style="" class="am-divider am-divider-default" />
              <h2>设计师其他作品</h2>
            </am-col>

            <div class="am-u-sm-6 am-u-md-3" v-for="(works, index) in otherWorks" :key="index">
              <router-link :to="'/worksDetail/' + works.id"></router-link>
              <am-image v-lazy="thumbnail + works.mainPic" :responsive="true"  :src="''" />
              <p>{{ works.name }}</p>
            </div>
          </am-row>
        </am-col>
      </am-row>
    </article></am-container>

    <am-alert :is-show.sync="alertVisible" title="提示" submit-btn-text="关闭" @submit="alertVisible = false">
      <h6>{{ alertMsg }}</h6>
    </am-alert>
  </main>
</template>

<script>
import Vue from 'vue'
import VueQArt from 'vue-qart'
import Header from '@/components/Header'
import Carousel from '@/components/Carousel'
import BdMap from '@/components/BdMap'
import SimpleShare from '@/assets/simple-share.js'
import QrCode from '@/components/QrCode'

export default {
  name: 'works-detail',
  data() {
    return {
      carImgShow: true,
      alertMsg: '',
      alertVisible: false,
      voteAbled: false,
      carImgs: [],
      carImgIndex: 0,
      worksID: this.$route.params.worksID,
      qartConfig: {// 二维码信息
        value: 'www.baidu.com',// this.works.panoramaUrl
        imagePath: '/static/star.png',
        filter: 'color',// threshold 黑白
      },
      share: {},

      // ***
      designer: {},
      works: {},
      worksPic: [],
      worksTag: [],
      otherWorks: [],
      store: {
        province: '',
        city: '',
        address: ''
      },
      storePic: [],


      /**
       * 
       */
      funs: {
        'goback': this.goback
      },
      btns: [{
        name: '返回上一级',
        act: 'goback'
      }],
    }
  },
  computed: {
    carImgsNum() {
      return this.carImgs.length;
    },
    curCarPath() {
      if(!this.carImgs[this.carImgIndex]) {
        return '';
      }
      return this.carImgs[this.carImgIndex].path;
    }
  },
  components: {
    Carousel, VueQArt, BdMap, QrCode,
    CHeader: Header
  },
  methods: {
    async ready() {
      await this.loadData();
      this.mergePic();
      this.initShare();
    },
    loadData() {
      return new Promise((resolve, reject) => {
        this.dgpost(this.api.GETWORKSDSG, {
          worksID: +this.worksID
        }).then(res => {
          this.designer = res.data.data.designer;
          this.works = res.data.data.works;
          this.worksPic = res.data.data.worksPic;
          this.worksTag = res.data.data.worksTag;
          this.otherWorks = res.data.data.otherWorks;
          this.store = res.data.data.store;
          this.storePic = res.data.data.storePic.slice(0, 3).map(item => item.pic);
          // =====
          this.qartConfig.value = this.works.panorama || '';
          // this.qartConfig.imagePath = this.designer.headImagePath;
          resolve()
        }).catch(err => {
          this.$message({
            title: '发生错误',
            type: 'error',
            message: err.msg,
            closeable: true
          });
          reject();
        });
      });
    },
    /**轮播图格式 */
    mergePic() {
      this.carImgs = [{
        path: this.works.mainPic, id: -1
      }].concat(this.worksPic.map(item => {
        return {
          path: item.pic, id:　-1
        };
      }));
    },
    /**投票 */
    vote() {
      this.dgpost(this.api.VOTEWORKS, {
        gameID:	+this.$store.getters.gameID,
        worksID: +this.worksID,
        ip: this.$store.state.IPv4
      }).then(res => {
        this.works.poll++;
        this.voteAbled = true;
      }).catch(err => {
        this.voteAbled = true;
        this.alertVisible = true;
        this.alertMsg = err.msg;
      });
    },
    /**初始化分享信息 */
    initShare() {
      this.share = new SimpleShare({
        url: window.location.href,
        title: 'title',
        content: 'content',
        pic: ''
      });
    },

    /**滑动更改图片 */
    preImg() {// 上一张
      this.carImgIndex = Math.max(0, --this.carImgIndex);
    },
    nextImg() {// 下一张
      this.carImgIndex = Math.min(this.carImgsNum - 1, ++this.carImgIndex);
    },

    /**
     * 
     */
    btnAct(name) {
      console.log('worksdetail-btnAct: ' + name);
      this.funs[name]();
    },
    /**返回上一页 */
    goback() {
      this.$router.go(-1);
    }
  },
  watch: {
    carImgIndex(val) {
      this.carImgShow = false;
      this.carImgShow = true;
    }
  },
  mounted() {
    this.ready();
  }
}
</script>

<style lang="less">
.dg-title { line-height: 90px; }
.flex-box { display: flex; justify-content: space-between; }
.flex-item { flex: 1; margin: 0 10px;}
</style>